import router from '@/router'
import store from '@/store'
// NProgress.start() 开启进度条
// NProgress.done()  关闭进度条
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 全局前置守卫: 在路由对应的页面被匹配展示之前, 会经过一个全局前置守卫,
// 守卫有个能力, 能决定这个页面最终展示与否, 放行, 就会展示这个组件; 不放行, 页面组件就看不到了
// next是一个函数, 放行函数, 如果你的页面需要被展示, 就必须next()
// to 你去哪
// from 来自哪
const WHITE_LIST = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()

  // next()
  // 放行的逻辑需要控制

  const token = store.getters.token
  if (token) {
    // next() // 应该判断去登录?? => 引导到首页
    if (to.path === '/login') {
      // 引导到首页
      next('/')
      NProgress.done()
    } else {
      // 应该在这里调用action 获取用户基本资料... 目的是为了在得到用户信息之后, 进入页面
      // 注意点: 1. 直接使用store 2. async的位置
      // 这是个异步操作!!!  等这个异步操作结束之后 才能放行进入页面!!! => 回调/promise
      // 应该是没有用户资料时 发请求获取用户资料; 有了, 不用发了
      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/getUserInfo')
      }

      next()
    }
  } else {
    // next('/login') 判断是否去白名单页面(不重要的页面,无需token也能访问的页面)
    // if (WHITE_LIST.indexOf(to.path) !== -1) {
    if (WHITE_LIST.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 全局后置守卫(对应的页面路由被确认要展示 就会触发这个守卫)
// 后置守卫的注意事项: 有一种情况后置守卫不会触发, 前置守卫做了拦截处理,
// 解决方法: 在拦截的地方手动处理关闭
router.afterEach((to, from) => {
  // 关闭进度条
  NProgress.done()
})

